<template>
  <div class="product-list">
    <!-- 头部搜索 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入账号'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate :shows="false"></CardDate>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="account_number" label="账号" align="center">
        </el-table-column>
        <el-table-column prop="telephone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="password" label="密码" align="center">
        </el-table-column>
        <el-table-column prop="creat_time" label="注册时间" align="center">
        </el-table-column>
        <el-table-column prop="login_time" label="最后登陆" align="center">
        </el-table-column>
        <el-table-column label="是否启动" align="center">
          <template>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog title="修改用户信息" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form :model="ruleForm" status-icon rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account_number">
          <el-input v-model="ruleForm.account_number" ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="ruleForm.telephone" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getUser } from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardDate from '@/components/commodity/CardDate.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
export default {
  name: 'KodaiOrderList',
  data() {
    return {
      tableData: [],
      value: true,
      centerDialogVisible: false,
      ruleForm: {

      }
    };
  },

  mounted() {
    getUser().then(res => {
      this.tableData = res.data.data
      this.value = (this.tableData[0].user_state =='1')
    })
  },
  methods: {
    handleEdit(index, row) {
      this.centerDialogVisible = !this.centerDialogVisible
      this.ruleForm = row

    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该商品信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
        // deletsProduct(row).then(res => {
        //   loading.close();
        //   if (res.data.code === 200) {
        //     // rows.splice(index, 1);//删掉该行
        //     this.$router.go(0)
        //     this.$notify({ title: '成功', message: '商品(' + row.product_name + ')\t移除成功', type: 'success' });
        //   } else {
        //     this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
        //   }
        // }).catch((err) => {
        //   loading.close();
        //   this.$message.error(err);
        // })
      })
    }
  }, components: {
    CardDate, CardHeader, CardinputVue
  }
};
</script>

<style lang="scss" scoped></style>